The stacking order of ::before and ::after pseudo-elements is controlled using CSS z-index in combination with the position property. By default, ::before is rendered behind the content of the element, and ::after is rendered in front. You can change this behavior by specifying z-index values.

Key Points

1
Pseudo-elements participate in the CSS stacking context like regular child elements.
2
To use z-index, the pseudo-element must have position set to relative, absolute, or fixed.
3
Higher z-index values appear above lower ones within the same stacking context.
4
Default order without z-index: ::before behind content, element content in the middle, ::after on top.

Example: Controlling Stacking Order

In this example, the blue ::after pseudo-element appears above the red ::before pseudo-element because it has a higher z-index. Adjusting z-index lets you layer pseudo-elements relative to the element's content and each other.

Best Practices

1
Always set position before applying z-index to pseudo-elements.
2
Use z-index to control visual stacking, especially for decorative overlays or layered effects.
3
Be mindful of stacking contexts created by parent elements, as they affect how z-index values interact.
4
Test across browsers to ensure consistent rendering of layered pseudo-elements.

Difficulty: 3/10

Topics: z-index, pseudo-element stacking, positioning context

Scenario Questions

0-2 years experience

1
You're trying to overlay a small icon using ::before on a button, but it's appearing behind the button text — how would you fix that?
2
I added a ::after border decoration to a card, but it’s not showing up at all — what’s the most likely thing I forgot to set?
3
If I set z-index: 1 on ::before and z-index: 2 on ::after, which one appears on top? Why?

2-5 years experience

1
Our dropdown menu’s ::before arrow is clipping when the menu is near the viewport edge — how would you debug and fix this without changing the HTML structure?
2
A designer says the hover effect on our call-to-action button looks broken — the ::after glow is appearing under the text instead of over it. What’s going on, and how do you fix it?
3
We have a tooltip with ::before and ::after for the arrow, but on mobile, the ::after part overlaps the content. How do you prioritize which pseudo-element should render on top without breaking desktop layout?

5-8 years experience

1
We’re building a reusable badge component that uses ::before and ::after for decorative elements, but in some contexts, it’s stacking unpredictably with modals and dropdowns — how do you design this to be robust across different stacking contexts?
2
A performance audit flagged our header component for excessive repaints — we’re animating ::before and ::after on hover. How do you optimize this without removing the visual effect?
3
Our design system has 15+ components using pseudo-elements for icons and borders, but QA reports inconsistent rendering across browsers. What’s your strategy to standardize and test stacking behavior at scale?

8+ years experience

1
We’re migrating from a legacy CSS framework that used extra span elements for decorative elements to using ::before and ::after — how do you ensure stacking consistency across 200+ legacy pages without breaking existing layouts?
2
Our design system is used across 5 product teams, and each team overrides pseudo-element styles differently — how do you architect a scalable, maintainable stacking contract that prevents visual regressions?
3
We’re introducing a new accessibility layer that requires dynamic pseudo-element content based on screen reader state — how do you design the stacking and rendering pipeline to avoid layout thrashing or a11y failures in low-power environments?

Follow-up Questions

❓What happens if the parent has z-index: 0 but the pseudo-elements don’t have position set?
❓Can you stack a ::before element above a child element? Why or why not?
❓How does transform: translate() affect the stacking context of pseudo-elements?